<template>
    <el-popover placement="bottom" width="150" trigger="hover">
        <div>
            <div>选择显示字段</div>
            <div>
                <el-checkbox-group v-model="checkList" @change="changeChecked">
                    <el-checkbox v-for="(item,index) in columList" :key="index"
                                 :label="item.params"
                    >{{ item.name }}
                    </el-checkbox>

                </el-checkbox-group>
            </div>
        </div>
        <div style="display: flex;margin-top: 5px">
            <el-button size="mini" @click="changeChecked('selectNotAll')">全不选
            </el-button>
            <el-button size="mini" type="primary" @click="changeChecked('selectAll')" style="margin-left: 5px">
                全选
            </el-button>
        </div>
        <template slot="reference">
            <i class="el-icon-setting" style="font-size: 18px; cursor: pointer"></i>
        </template>
    </el-popover>
</template>

<script>
export default {
    props: {
        checkListProp: {
            type: Array,
            default: () => []
        },
        columList: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            checkList: this.checkListProp
        }
    },
    watch: {
        checkListProp(newVal, oldVal) {
            this.checkList = newVal
        }
    },
    methods: {
        changeChecked(type) {
            this.$emit('changeCheckedEmit', this.checkList, type)
        }
    }
}

</script>

<style scoped>

</style>
